<!DOCTYPE html>
<html>
<head lang="en">
    <title>test2-index</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="./stylesheets/base.css">
    <link rel="stylesheet" type="text/css" href="./stylesheets/zTreeStyle.css">
    <link rel="stylesheet" type="text/css" href="./stylesheets/index.css">
    <style type="text/css">
        .shanxing {
            width: 300px;
            height: 80px;
            box-sizing: border-box;
            border-width: 40px 150px 40px 150px;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-radius: 50%;
        }

        h3 {
            font-size: 24px;
            font-weight: bold;
        }

        .left {
            background-color: #7EC4CC;
        }

        .right {
            background-color: #ffab19;
        }

        .mc-layout1, .mc-layout2, .mc-layout3 {
            margin: 10px auto;
            height: 100px;
        }

        .mc-layout1 .left {
            float: left;
            width: 150px;
            height: 100%;
        }

        .mc-layout1 .right {
            height: 100%;
            margin-left: 150px;
            margin-right: 0px;
        }

        .mc-layout2 .left {
            float: left;
            width: 150px;
            height: 100%;
        }

        .mc-layout2 .right {
            float: right;
            height: 100%;
            width: calc(100% - 150px);
        }

        .mc-layout3 .left {
            float: left;
            width: 150px;
            height: 100%;
            margin-right: -100%;
        }

        .mc-layout3 .right {
            float: left;
            width: 100%;
            height: 100%;
            background-color: transparent;
        }

        .mc-layout3 .right .inner {
            height: 100px;
            margin-left: 150px;
            background-color: #ffab19;

        }

        .container {
            width: 100%;
            overflow: hidden;
        }

        .container .row {
            margin: -15px;
        }

        .container .row .col {
            float: left;
            width: 50%;
            height: 30px;
            background-color: #666;
            padding: 15px;
        }
    </style>
</head>
<body>
省：<select id='province' style="width:100px" onchange='amapAdcode.createCity(this.value)'></select>
市：<select id='city' style="width:100px" onchange='amapAdcode.createDistrict(this.value)'></select>
区：<select id='district' style="width:100px" onchange='amapAdcode.createBiz(this.value)'></select>
商圈：<select id='biz_area' style="width:100px"></select>
<div class="shanxing"></div>
<ul id="mcTree" class="ztree"></ul>
<h3>使用浮动实现一列固定宽度，另一列自适应宽度</h3>
<div class="mc-layout1">
    <div class="left">向左浮动，不撑父元素</div>
    <div class="right">不浮动，设置margin-left登录left的宽度</div>
    <div class="clearfix"></div>
</div>
<h3>使用CSS3特性calc实现</h3>
<div class="mc-layout2">
    <div class="left">向左浮动</div>
    <div class="right">css3 特性 calc(100% - 150px)</div>
    <div class="clearfix"></div>
</div>
<h3>margin-left负值实现</h3>
<div class="mc-layout3">
    <div class="left">右侧列向左浮动，margin-right:-100%;</div>
    <div class="right">
        <div class="inner">
            右侧列向左浮动，宽度100%，它的子元素margin-left等于left的宽度，
        </div>
    </div>
</div>
<h3>绝对定位实现</h3>
<div class="mc-layout3">
    <div class="left">右侧列向左浮动，margin-right:-100%;</div>
    <div class="right">
        <div class="inner">
            右侧列向左浮动，宽度100%，它的子元素margin-left等于left的宽度，
        </div>
    </div>
</div>
<h3>模拟bootstrap栅格系统</h3>
<div class="container">
    <div class="row">
        <div class="col"></div>
    </div>
</div>

<!--1
<div class="logo">大话西游<br>手&nbsp;&nbsp;&nbsp;&nbsp;游<br><span style="color: #aa0e19">钓&nbsp;&nbsp;鱼&nbsp;&nbsp;岛</span></div>
<div class="logo">川&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大<br>2006&nbsp;&nbsp;级<br><span style="color: #aa0e19">材料工程</span></div>
-->
<script>

</script>
<script data-main="js/main" defer async="true" src="//cdn.bootcss.com/require.js/2.1.22/require.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=3ac5a1f8350126d74f46a9fbc7715d8b&plugin=AMap.DistrictSearch"></script>

<script>
    var amapAdcode = {};
    amapAdcode._district = new AMap.DistrictSearch({//高德行政区划查询插件实例
        subdistrict: 1   //返回下一级行政区
    });
    amapAdcode._overlay = [];//行政区划覆盖物
    amapAdcode.createSelectList = function(selectId, list) {//生成下拉列表
        console.log(list)
        var selectList = document.getElementById(selectId);
        selectList.innerHTML = '';
        selectList.add(new Option('--请选择--'));
        for (var i = 0, l = list.length, option; i < l; i++) {
            option = new Option(list[i].name);
            option.setAttribute("value", list[i].adcode)
            selectList.add(option);
        }
    }
    amapAdcode.search = function(adcodeLevel, keyword, selectId) {//查询行政区划列表并生成相应的下拉列表
        var me = this;
        if (adcodeLevel == 'district'||adcodeLevel == 'city') {//第三级时查询边界点
            this._district.setExtensions('all');
        } else {
            this._district.setExtensions('base');
        }
        this._district.setLevel(adcodeLevel); //行政区级别
        this._district.search(keyword, function(status, result) {//注意，api返回的格式不统一，在下面用三个条件分别处理
            var districtData = result.districtList[0];
            if (districtData.districtList) {
                me.createSelectList(selectId, districtData.districtList);
            } else if (districtData.districts) {
                me.createSelectList(selectId, districtData.districts);
            } else {
                document.getElementById(selectId).innerHTML = '';
            }
        });
    }
    amapAdcode.createProvince = function() {//创建省列表
        this.search('country', '中国', 'province');
    }
    amapAdcode.createCity = function(provinceAdcode) {//创建市列表
        this.search('province', provinceAdcode, 'city');
        this.clear('district');
        this.clear('biz_area');
    }
    amapAdcode.createDistrict = function(cityAdcode) {//创建区县列表
        this.search('city', cityAdcode, 'district');
        this.clear('biz_area');
    }
    amapAdcode.createBiz = function(districtAdcode) {//创建商圈列表
        this.search('district', districtAdcode, 'biz_area');
    }
    amapAdcode.createProvince();
    var length = 10;
    function fn() {
        console.log(this.length);
    }
    var obj = {
        length: 5,
        method: function (fn) {
            fn();
            console.log(arguments[0])
            arguments[0]();
        }
    }
    obj.method(fn, 1);
    /*(function (o, customOption) {
        var option = o.extend(true, {}, {
            belowIEVersion: 9,
            text: "为了您更好的体验效果，建议您使用Chrome或者Firefox",
            absolute: false,
            tipStyle: {
                "width": "100%",
                "height": "30px",
                "text-align": "center",
                "color": "#fff",
                "background-color": "#000"
            }
        }, customOption);
        option.tipStyle["line-height"] = option.tipStyle.height;
        if (option.absolute) {
            option.tipStyle.position = "absolute";
        }
        function getBrowerVersion() {
            var ua = navigator.userAgent.toLowerCase(),
                    uapv = navigator.appVersion;
            var isWinXp = ua.indexOf("nt 5.1") > -1; //XP系统
            var browsers = {
                isIE0: uapv.indexOf("MSIE 6.") > -1,
                isIE6: uapv.indexOf("MSIE 6.") > -1,
                isIE7: uapv.indexOf("MSIE 7.") > -1,
                isIE8: uapv.indexOf("MSIE 8.") > -1,
                isIE9: uapv.indexOf("MSIE 9.") > -1,
                isIE10: uapv.indexOf("MSIE 10.") > -1
            };
            var sv = option.belowIEVersion, flag = false;
            while (sv--) {
                if (browsers["isIE" + sv]) {
                    flag = browsers["isIE" + sv];
                } else {
                    break;
                }
            }
            return flag;
        }

        if (getBrowerVersion()) {
            var _alertText = option.text + "<a style='color:red' href='javascript:void(0);' onclick='document.body.removeChild(this.parentNode)'>关闭提示</a>";
            var $tip = o("<div>").css(option.tipStyle).append(_alertText);
            var _showTextSt = setTimeout(function () {
                $tip.insertBefore($("body").children().get(0));
                clearTimeout(_showTextSt);
            }, 100);
        }
    })(window.jQuery || $, {absolute: false,tipStyle: {
        "background-color": "#000"
    }});*/
</script>
</body>
</html>
